<html>

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<title>iscs_FrontEnd:css-style-guide</title>
	<link href="toc/style/github-bf51422f4bb36427d391e4b75a1daa083c2d840e.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/style/github2-d731afd4f624c99a4b19ad69f3083cd6d02b81d5.css" media="all" rel="stylesheet" type="text/css" />
	<!--<link href="toc/css/zTreeStyle/zTreeStyle.css" media="all" rel="stylesheet" type="text/css" />-->
	<link href="toc/css/metroStyle/metroStyle.css" media="all" rel="stylesheet" type="text/css" />
	<link href="toc/css/themes/github-v2.min.css" media="all" rel="stylesheet" type="text/css" />
	<link type="text/css" rel="stylesheet" href="assets/bootstrap/css/bootstrap.css">
	<link type="text/css" rel="stylesheet" href="indexcss/docs.css">
	<style>
		table {
			border: 1px solid #ccc;
			border-left: 0;
			width: 100%;
			font-size: 14px;
		}
		
		tbody,
		thead,
		tr {
			width: 100%;
		}
		
		tr th {
			border: 1px solid #ccc;
			border-right: 0;
			background: #FF6537;
			color: #fff;
			height: 40px;
			padding: 5px 10px;
			font-size: 14px;
		}
		
		tr td {
			text-align: left;
			padding: 5px 10px;
			border: 1px solid #ccc;
			border-right: 0;
		}
		
		tr:nth-child(odd) {
			background: #f4f4f4;
		}
		
		table tr:hover td {
			background: #ccc;
		}
		
		.markdown-body h1 {
			font-size: 20px;
			color: #FF6537;
		}
		
		.markdown-body h2 {
			font-size: 18px;
		}
		
		.markdown-body h3 {
			font-size: 16px;
		}
		
		#header {
			width: 100%;
			height: 25px;
			background-color: #FF6537;
			position: fixed;
			top: 0;
		}
	</style>

</head>

<body>
	
	<div>
		<div style='width:25%;'>
			<ul id="tree" class="ztree" style='width:100%;'>

			</ul>
		</div>
		<div id='readme' style='width:70%;margin-left:20%;'>
			<article class='markdown-body'>
				<p><strong>CSS编码规范</strong></p>
<h1 id="-">前言</h1>
<p>CSS 作为网页样式的描述语言，在百度一直有着广泛的应用。本文档的目标是使 CSS 代码风格保持一致，容易被理解和被维护。</p>
<p>虽然本文档是针对 CSS 设计的，但是在使用各种 CSS 的预编译器(如 less、sass、stylus 等)时，适用的部分也应尽量遵循本文档的约定。</p>
<h1 id="-">代码风格</h1>
<h2 id="-">文件</h2>
<p>[建议] <code>CSS</code> 文件使用无 <code>BOM</code> 的 <code>UTF-8</code> 编码。</p>
<p>解释：</p>
<p>UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。</p>
<h2 id="-">缩进</h2>
<p>[强制] 使用 <code>4</code> 个空格做为一个缩进层级，不允许使用 <code>2</code> 个空格 或 <code>tab</code> 字符。</p>
<p>示例：</p>
<pre><code class="lang-css">.selector {
    margin: 0;
    padding: 0;
}
</code></pre>
<h2 id="-">空格</h2>
<p>[强制] <code>选择器</code> 与 <code>{</code> 之间必须包含空格。</p>
<p>示例：</p>
<pre><code class="lang-css">.selector {
}
</code></pre>
<p>[强制] <code>属性名</code> 与之后的 <code>:</code> 之间不允许包含空格， <code>:</code> 与 <code>属性值</code> 之间必须包含空格。</p>
<p>示例：</p>
<pre><code class="lang-css">margin: 0;
</code></pre>
<p>[强制] <code>列表型属性值</code> 书写在单行时，<code>,</code> 后必须跟一个空格。</p>
<p>示例：</p>
<pre><code class="lang-css">font-family: Arial, sans-serif;
</code></pre>
<h2 id="-">行长度</h2>
<p>[强制] 每行不得超过 <code>120</code> 个字符，除非单行不可分割。</p>
<p>解释：</p>
<p>常见不可分割的场景为URL超长。</p>
<p>[建议] 对于超长的样式，在样式值的 <code>空格</code> 处或 <code>,</code> 后换行，建议按逻辑分组。</p>
<p>示例：</p>
<pre><code class="lang-css">/* 不同属性值按逻辑分组 */
background:
    transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
    no-repeat 0 0;

/* 可重复多次的属性，每次重复一行 */
background-image:
    url(aVeryVeryVeryLongUrlIsPlacedHere)
    url(anotherVeryVeryVeryLongUrlIsPlacedHere);

/* 类似函数的属性值可以根据函数调用的缩进进行 */
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.04, rgb(88,94,124)),
    color-stop(0.52, rgb(115,123,162))
);
</code></pre>
<h2 id="-">选择器</h2>
<p>[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}

/* bad */
.post, .page, .comment {
    line-height: 1.5;
}
</code></pre>
<p>[强制] <code>&gt;</code>、<code>+</code>、<code>~</code> 选择器的两边各保留一个空格。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
main &gt; nav {
    padding: 10px;
}

label + input {
    margin-left: 5px;
}

input:checked ~ button {
    background-color: #69C;
}

/* bad */
main&gt;nav {
    padding: 10px;
}

label+input {
    margin-left: 5px;
}

input:checked~button {
    background-color: #69C;
}
</code></pre>
<p>[强制] 属性选择器中的值必须用双引号包围。</p>
<p>解释：</p>
<p>不允许使用单引号，不允许不使用引号。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
article[character=&quot;juliet&quot;] {
    voice-family: &quot;Vivien Leigh&quot;, victoria, female;
}

/* bad */
article[character=&#39;juliet&#39;] {
    voice-family: &quot;Vivien Leigh&quot;, victoria, female;
}
</code></pre>
<h2 id="-">属性</h2>
<p>[强制] 属性定义必须另起一行。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }
</code></pre>
<p>[强制] 属性定义后必须以分号结尾。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}
</code></pre>
<h1 id="-">通用</h1>
<h2 id="-">选择器</h2>
<p>[强制] 如无必要，不得为 <code>id</code>、<code>class</code> 选择器添加类型选择器进行限定。</p>
<p>解释：</p>
<p>在性能和维护性上，都有一定的影响。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
#error,
.danger-message {
    font-color: #c00;
}

/* bad */
dialog#error,
p.danger-message {
    font-color: #c00;
}
</code></pre>
<p>[建议] 选择器的嵌套层级应不大于 <code>3</code> 级，位置靠后的限定条件应尽可能精确。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}
</code></pre>
<h2 id="-">属性缩写</h2>
<p>[建议] 在可以使用缩写的情况下，尽量使用属性缩写。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.post {
    font: 12px/1.5 arial, sans-serif;
}

/* bad */
.post {
    font-family: arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}
</code></pre>
<p>[建议] 使用 <code>border</code> / <code>margin</code> / <code>padding</code> 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。</p>
<p>解释：</p>
<p><code>border</code> / <code>margin</code> / <code>padding</code> 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。</p>
<p>示例：</p>
<pre><code class="lang-css">/* centering &lt;article class=&quot;page&quot;&gt; horizontally and highlight featured ones */
article {
    margin: 5px;
    border: 1px solid #999;
}

/* good */
.page {
    margin-right: auto;
    margin-left: auto;
}

.featured {
    border-color: #69c;
}

/* bad */
.page {
    margin: 5px auto; /* introducing redundancy */
}

.featured {
    border: 1px solid #69c; /* introducing redundancy */
}
</code></pre>
<h2 id="-">属性书写顺序</h2>
<p>[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 <strong>Formatting Model（布局方式、位置） &gt; Box Model（尺寸） &gt; Typographic（文本相关） &gt; Visual（视觉效果）</strong> 的顺序书写，以提高代码的可读性。</p>
<p>解释：</p>
<ul>
<li>Formatting Model 相关属性包括：<code>position</code> / <code>top</code> / <code>right</code> / <code>bottom</code> / <code>left</code> / <code>float</code> / <code>display</code> / <code>overflow</code> 等</li>
<li>Box Model 相关属性包括：<code>border</code> / <code>margin</code> / <code>padding</code> / <code>width</code> / <code>height</code> 等</li>
<li>Typographic 相关属性包括：<code>font</code> / <code>line-height</code> / <code>text-align</code> / <code>word-wrap</code> 等</li>
<li>Visual 相关属性包括：<code>background</code> / <code>color</code> / <code>transition</code> / <code>list-style</code> 等</li>
</ul>
<p>另外，如果包含 <code>content</code> 属性，应放在最前面。</p>
<p>示例：</p>
<pre><code class="lang-css">.sidebar {
    /* formatting model: positioning schemes / offsets / z-indexes / display / ...  */
    position: absolute;
    top: 50px;
    left: 0;
    overflow-x: hidden;

    /* box model: sizes / margins / paddings / borders / ...  */
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;

    /* typographic: font / aligns / text styles / ... */
    font-size: 14px;
    line-height: 20px;

    /* visual: colors / shadows / gradients / ... */
    background: #f5f5f5;
    color: #333;
    -webkit-transition: color 1s;
       -moz-transition: color 1s;
            transition: color 1s;
}
</code></pre>
<h2 id="-">清除浮动</h2>
<p>[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 <code>clear</code> 或触发 <code>BFC</code> 的方式进行 <code>clearfix</code>。尽量不使用增加空标签的方式。</p>
<p>解释：</p>
<p>触发 BFC 的方式很多，常见的有：</p>
<ul>
<li>float 非 none</li>
<li>position 非 static</li>
<li>overflow 非 visible</li>
</ul>
<p>如希望使用更小副作用的清除浮动方法，参见 <a href="http://nicolasgallagher.com/micro-clearfix-hack/">A new micro clearfix hack</a> 一文。</p>
<p>另需注意，对已经触发 BFC 的元素不需要再进行 clearfix。</p>
<h2 id="-important">!important</h2>
<p>[建议] 尽量不使用 <code>!important</code> 声明。</p>
<p>[建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 <code>!important</code> 定义样式。</p>
<p>解释：</p>
<p>必须注意的是，仅在设计上 <code>确实不允许任何其它场景覆盖样式</code> 时，才使用内联的 <code>!important</code> 样式。通常在第三方环境的应用中使用这种方案。下面的 <code>z-index</code> 章节是其中一个特殊场景的典型样例。</p>
<h2 id="z-index">z-index</h2>
<p>[建议] 将 <code>z-index</code> 进行分层，对文档流外绝对定位元素的视觉层级关系进行管理。</p>
<p>解释：</p>
<p>同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 <code>z-index</code> 或递增 <code>z-index</code>。</p>
<p>建议每层包含100个 <code>z-index</code> 来容纳足够的元素，如果每层元素较多，可以调整这个数值。</p>
<p>[建议] 在可控环境下，期望显示在最上层的元素，<code>z-index</code> 指定为 <code>999999</code>。</p>
<p>解释：</p>
<p>可控环境分成两种，一种是自身产品线环境；还有一种是可能会被其他产品线引用，但是不会被外部第三方的产品引用。</p>
<p>不建议取值为 <code>2147483647</code>。以便于自身产品线被其他产品线引用时，当遇到层级覆盖冲突的情况，留出向上调整的空间。</p>
<p>[建议] 在第三方环境下，期望显示在最上层的元素，通过标签内联和 <code>!important</code>，将 <code>z-index</code> 指定为 <code>2147483647</code>。</p>
<p>解释：</p>
<p>第三方环境对于开发者来说完全不可控。在第三方环境下的元素，为了保证元素不被其页面其他样式定义覆盖，需要采用此做法。</p>
<h1 id="-">值与单位</h1>
<h2 id="-">文本</h2>
<p>[强制] 文本内容必须用双引号包围。</p>
<p>解释：</p>
<p>文本类型的内容可能在选择器、属性值等内容中。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
html[lang|=&quot;zh&quot;] q:before {
    font-family: &quot;Microsoft YaHei&quot;, sans-serif;
    content: &quot;“&quot;;
}

html[lang|=&quot;zh&quot;] q:after {
    font-family: &quot;Microsoft YaHei&quot;, sans-serif;
    content: &quot;”&quot;;
}

/* bad */
html[lang|=zh] q:before {
    font-family: &#39;Microsoft YaHei&#39;, sans-serif;
    content: &#39;“&#39;;
}

html[lang|=zh] q:after {
    font-family: &quot;Microsoft YaHei&quot;, sans-serif;
    content: &quot;”&quot;;
}
</code></pre>
<h2 id="-">数值</h2>
<p>[强制] 当数值为 0 - 1 之间的小数时，省略整数部分的 <code>0</code>。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
panel {
    opacity: .8;
}

/* bad */
panel {
    opacity: 0.8;
}
</code></pre>
<h2 id="url-">url()</h2>
<p>[强制] <code>url()</code> 函数中的路径不加引号。</p>
<p>示例：</p>
<pre><code class="lang-css">body {
    background: url(bg.png);
}
</code></pre>
<p>[建议] <code>url()</code> 函数中的绝对路径可省去协议名。</p>
<p>示例：</p>
<pre><code class="lang-css">body {
    background: url(//baidu.com/img/bg.png) no-repeat 0 0;
}
</code></pre>
<h2 id="-">长度</h2>
<p>[强制] 长度为 <code>0</code> 时须省略单位。 (也只有长度单位可省)</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
body {
    padding: 0 5px;
}

/* bad */
body {
    padding: 0px 5px;
}
</code></pre>
<h2 id="-">颜色</h2>
<p>[强制] RGB颜色值必须使用十六进制记号形式 <code>#rrggbb</code>。不允许使用 <code>rgb()</code>。 </p>
<p>解释：</p>
<p>带有alpha的颜色信息可以使用 <code>rgba()</code>。使用 <code>rgba()</code> 时每个逗号后必须保留一个空格。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.success {
    box-shadow: 0 0 2px rgba(0, 128, 0, .3);
    border-color: #008000;
}

/* bad */
.success {
    box-shadow: 0 0 2px rgba(0,128,0,.3);
    border-color: rgb(0, 128, 0);
}
</code></pre>
<p>[强制] 颜色值可以缩写时，必须使用缩写形式。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.success {
    background-color: #aca;
}

/* bad */
.success {
    background-color: #aaccaa;
}
</code></pre>
<p>[强制] 颜色值不允许使用命名色值。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.success {
    color: #90ee90;
}

/* bad */
.success {
    color: lightgreen;
}
</code></pre>
<p>[建议] 颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.success {
    background-color: #aca;
    color: #90ee90;
}

/* good */
.success {
    background-color: #ACA;
    color: #90EE90;
}

/* bad */
.success {
    background-color: #ACA;
    color: #90ee90;
}
</code></pre>
<h2 id="2d-">2D 位置</h2>
<p>[强制] 必须同时给出水平和垂直方向的位置。</p>
<p>解释：</p>
<p>2D 位置初始值为 <code>0% 0%</code>，但在只有一个方向的值时，另一个方向的值会被解析为 center。为避免理解上的困扰，应同时给出两个方向的值。<a href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-position">background-position属性值的定义</a></p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
body {
    background-position: center top; /* 50% 0% */
}

/* bad */
body {
    background-position: top; /* 50% 0% */
}
</code></pre>
<h1 id="-">文本编排</h1>
<h2 id="-">字体族</h2>
<p>[强制] <code>font-family</code> 属性中的字体族名称应使用字体的英文 <code>Family Name</code>，其中如有空格，须放置在引号中。</p>
<p>解释：</p>
<p>所谓英文 Family Name，为字体文件的一个元数据，常见名称如下：</p>
<table>
<thead>
<tr>
<th>字体</th>
<th>操作系统</th>
<th>Family Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>宋体 (中易宋体)</td>
<td>Windows</td>
<td>SimSun</td>
</tr>
<tr>
<td>黑体 (中易黑体)</td>
<td>Windows</td>
<td>SimHei</td>
</tr>
<tr>
<td>微软雅黑</td>
<td>Windows</td>
<td>Microsoft YaHei</td>
</tr>
<tr>
<td>微软正黑</td>
<td>Windows</td>
<td>Microsoft JhengHei</td>
</tr>
<tr>
<td>华文黑体</td>
<td>Mac/iOS</td>
<td>STHeiti</td>
</tr>
<tr>
<td>冬青黑体</td>
<td>Mac/iOS</td>
<td>Hiragino Sans GB</td>
</tr>
<tr>
<td>文泉驿正黑</td>
<td>Linux</td>
<td>WenQuanYi Zen Hei</td>
</tr>
<tr>
<td>文泉驿微米黑</td>
<td>Linux</td>
<td>WenQuanYi Micro Hei</td>
</tr>
</tbody>
</table>
<p>示例：</p>
<pre><code class="lang-css">h1 {
    font-family: &quot;Microsoft YaHei&quot;;
}
</code></pre>
<p>[强制] <code>font-family</code> 按「西文字体在前、中文字体在后」、「效果佳 (质量高/更能满足需求) 的字体在前、效果一般的字体在后」的顺序编写，最后必须指定一个通用字体族( <code>serif</code> / <code>sans-serif</code> )。</p>
<p>解释：</p>
<p>更详细说明可参考<a href="http://www.zhihu.com/question/19911793/answer/13329819">本文</a>。</p>
<p>示例：</p>
<pre><code class="lang-css">/* Display according to platform */
.article {
    font-family: Arial, sans-serif;
}

/* Specific for most platforms */
h1 {
    font-family: &quot;Helvetica Neue&quot;, Arial, &quot;Hiragino Sans GB&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Microsoft YaHei&quot;, sans-serif;
}
</code></pre>
<p>[强制] <code>font-family</code> 不区分大小写，但在同一个项目中，同样的 <code>Family Name</code> 大小写必须统一。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
body {
    font-family: Arial, sans-serif;
}

h1 {
    font-family: Arial, &quot;Microsoft YaHei&quot;, sans-serif;
}

/* bad */
body {
    font-family: arial, sans-serif;
}

h1 {
    font-family: Arial, &quot;Microsoft YaHei&quot;, sans-serif;
}
</code></pre>
<h2 id="-">字号</h2>
<p>[强制] 需要在 Windows 平台显示的中文内容，其字号应不小于 <code>12px</code>。</p>
<p>解释：</p>
<p>由于 Windows 的字体渲染机制，小于 <code>12px</code> 的文字显示效果极差、难以辨认。</p>
<h2 id="-">字体风格</h2>
<p>[建议] 需要在 Windows 平台显示的中文内容，不要使用除 <code>normal</code> 外的 <code>font-style</code>。其他平台也应慎用。</p>
<p>解释：</p>
<p>由于中文字体没有 <code>italic</code> 风格的实现，所有浏览器下都会 fallback 到 <code>obilique</code> 实现 (自动拟合为斜体)，小字号下 (特别是 Windows 下会在小字号下使用点阵字体的情况下) 显示效果差，造成阅读困难。</p>
<h2 id="-">字重</h2>
<p>[强制] <code>font-weight</code> 属性必须使用数值方式描述。</p>
<p>解释：</p>
<p>CSS 的字重分 100 – 900 共九档，但目前受字体本身质量和浏览器的限制，实际上支持 <code>400</code> 和 <code>700</code> 两档，分别等价于关键词 <code>normal</code> 和 <code>bold</code>。</p>
<p>浏览器本身使用一系列<a href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight">启发式规则</a>来进行匹配，在 <code>&lt;700</code> 时一般匹配字体的 Regular 字重，<code>&gt;=700</code> 时匹配 Bold 字重。</p>
<p>但已有浏览器开始支持 <code>=600</code> 时匹配 Semibold 字重 (见<a href="http://justineo.github.io/slideshows/font/#/3/15">此表</a>)，故使用数值描述增加了灵活性，也更简短。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
h1 {
    font-weight: 700;
}

/* bad */
h1 {
    font-weight: bold;
}
</code></pre>
<h2 id="-">行高</h2>
<p>[建议] <code>line-height</code> 在定义文本段落时，应使用数值。</p>
<p>解释：</p>
<p>将 <code>line-height</code> 设置为数值，浏览器会基于当前元素设置的 <code>font-size</code> 进行再次计算。在不同字号的文本段落组合中，能达到较为舒适的行间间隔效果，避免在每个设置了 <code>font-size</code> 都需要设置 <code>line-height</code>。</p>
<p>当 <code>line-height</code> 用于控制垂直居中时，还是应该设置成与容器高度一致。</p>
<p>示例：</p>
<pre><code class="lang-css">.container {
    line-height: 1.5;
}
</code></pre>
<h1 id="-">变换与动画</h1>
<p>[强制] 使用 <code>transition</code> 时应指定 <code>transition-property</code>。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.box {
    transition: color 1s, border-color 1s;
}

/* bad */
.box {
    transition: all 1s;
}
</code></pre>
<p>[建议] 尽可能在浏览器能高效实现的属性上添加过渡和动画。</p>
<p>解释：</p>
<p>见<a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">本文</a>，在可能的情况下应选择这样四种变换：</p>
<ul>
<li><code>transform: translate(npx, npx);</code></li>
<li><code>transform: scale(n);</code></li>
<li><code>transform: rotate(ndeg);</code></li>
<li><code>opacity: 0..1;</code></li>
</ul>
<p>典型的，可以使用 <code>translate</code> 来代替 <code>left</code> 作为动画属性。</p>
<p>示例：</p>
<pre><code class="lang-css">/* good */
.box {
    transition: transform 1s;
}
.box:hover {
    transform: translate(20px); /* move right for 20px */
}

/* bad */
.box {
    left: 0;
    transition: left 1s;
}
.box:hover {
    left: 20px; /* move right for 20px */
}
</code></pre>
<h1 id="-">响应式</h1>
<p>[强制] <code>Media Query</code> 不得单独编排，必须与相关的规则一起定义。</p>
<p>示例：</p>
<pre><code class="lang-css">/* Good */
/* header styles */
@media (...) {
    /* header styles */
}

/* main styles */
@media (...) {
    /* main styles */
}

/* footer styles */
@media (...) {
    /* footer styles */
}


/* Bad */
/* header styles */
/* main styles */
/* footer styles */

@media (...) {
    /* header styles */
    /* main styles */
    /* footer styles */
}
</code></pre>
<p>[强制] <code>Media Query</code> 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。</p>
<p>示例：</p>
<pre><code class="lang-css">@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx),             /* The standard way */
(min-resolution: 192dpi) {           /* dppx fallback */
    /* Retina-specific stuff here */
}
</code></pre>
<p>[建议] 尽可能给出在高分辨率设备 (Retina) 下效果更佳的样式。</p>
<h1 id="-">兼容性</h1>
<h2 id="-">属性前缀</h2>
<p>[强制] 带私有前缀的属性由长到短排列，按冒号位置对齐。</p>
<p>解释：</p>
<p>标准属性放在最后，按冒号对齐方便阅读，也便于在编辑器内进行多行编辑。</p>
<p>示例：</p>
<pre><code class="lang-css">.box {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
</code></pre>
<h2 id="hack">Hack</h2>
<p>[建议] 需要添加 <code>hack</code> 时应尽可能考虑是否可以采用其他方式解决。</p>
<p>解释：</p>
<p>如果能通过合理的 HTML 结构或使用其他的 CSS 定义达到理想的样式，则不应该使用 hack 手段解决问题。通常 hack 会导致维护成本的增加。</p>
<p>[建议] 尽量使用 <code>选择器 hack</code> 处理兼容性，而非 <code>属性 hack</code>。</p>
<p>解释：</p>
<p>尽量使用符合 CSS 语法的 selector hack，可以避免一些第三方库无法识别 hack 语法的问题。</p>
<p>示例：</p>
<pre><code class="lang-css">/* IE 7 */
*:first-child + html #header {
    margin-top: 3px;
    padding: 5px;
}

/* IE 6 */
* html #header {
    margin-top: 5px;
    padding: 4px;
}
</code></pre>
<p>[建议] 尽量使用简单的 <code>属性 hack</code>。</p>
<p>示例：</p>
<pre><code class="lang-css">.box {
    _display: inline; /* fix double margin */
    float: left;
    margin-left: 20px;
}

.container {
    overflow: hidden;
    *zoom: 1; /* triggering hasLayout */
}
</code></pre>
<h2 id="expression">Expression</h2>
<p>[强制] 禁止使用 <code>Expression</code>。</p>

			</article>
		</div>
	</div>
</body>

</html>
<script type="text/javascript" src="toc/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="toc/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="toc/js/ztree_toc.js"></script>
<script type="text/javascript" src="toc_conf.js"></script>
<script type="text/javascript" src="toc/js/prettify.js"></script>

<SCRIPT type="text/javascript">
	$(function() {
		var css_conf = eval(markdown_panel_style);
		$('#readme').css(css_conf)

		var conf = eval(jquery_ztree_toc_opts);
		$('#tree').ztree_toc(conf);
		$('pre').addClass('prettyprint linenums');
		$('td pre').removeClass('prettyprint');
		prettyPrint();

	});
</SCRIPT>